<!-- 筛选弹出框组件，用于列表页数据的条件筛选 -->
<template>
  <pop position="right"
       :opened="initScroll"
       :style="{ height: '100%', width: '70%' }">
    <template #content>
      <div class="pop-container">
        <div class="filter-content">
          <div class="nav-space"></div>
          <div class="scroll-wrapper"
               ref="wrapper">
            <div class="filter-wrap">
              <template v-for="filter in filters"
                        :key="filter.code">
                <div class="filter-group">{{filter.name}}</div>
                <div class="filter-node-wrap">
                  <span class="filter-node"
                        :class="node.active? 'active' : ''"
                        v-for="node in filter.node"
                        :key="node.name"
                        @click="choose(node)">
                    {{node.name}}
                  </span>
                </div>
              </template>
            </div>
          </div>
        </div>
        <!-- 过滤器底部 S -->
        <div class="filter-footer">
          <van-button @click="reset"
                      block>重置</van-button>
          <van-button @click="confirm(this)"
                      block>确定</van-button>
        </div>
        <!-- 过滤器底部 E -->
      </div>
    </template>
  </pop>
</template>

<script>
import Pop from "@/components/Pop.vue"
import { reactive, toRefs, onMounted, inject, ref, toRaw, } from 'vue'
import $store from '@/store'
import useScroll from "@/hooks/usebScroll"

const usePop = function () {
  const state = reactive({
    // 筛选项
    filters: [
      {
        name: '审核状态',
        code: 'checkStatus',
        node: []
      },
      {
        name: '参与形式',
        code: 'joinType',
        node: [
          {
            name: '主持', code: '0'
          },
          {
            name: '参与', code: '1'
          }
        ]
      },
    ],
  })

  // 清空已勾选的筛选条件
  const reset = () => {
    const originFilter = toRaw(state.filters)
    const m = originFilter.slice(0, originFilter.length)
    m.forEach(filter => {
      filter.node.forEach(node => {
        node.active = false
      })
    })
    state.filters = m
  }
  const getFilters = async (beanId) => {
    const beanFilter = await $store.getters['filter'](beanId)
    state.filters[0].node = beanFilter
  }
  const active = (node) => {
    return node.acitve ? 'active' : ''
  }
  const choose = (node) => {
    node.active = !node.active
  }
  return {
    state,
    reset,
    getFilters,
    active,
    choose
  }
}
export default {
  components: {
    Pop
  },
  props: {
    beanId: {
      type: String,
      required: true
    }
  },
  setup (props, { emit }) {
    const { reset, state, getFilters, active, choose } = usePop()
    const $scroll = useScroll()
    const wrapper = ref('wrapper')
    const popState = inject('popState')
    const initScroll = () => {
      $scroll.initOrRefreshBScroll(wrapper.value)
    }
    // 获取筛选条件
    const getfilterParams = () => {
      const params = {}
      const parents = toRaw(state.filters)
      parents.forEach(parent => {
        let thisCode = ""
        parent.node.filter(node => {
          return node.active
        }).forEach(activeNode => {
          thisCode += `${activeNode.code},`
        })
        // 去除末尾逗号
        thisCode = thisCode.substring(0, thisCode.length - 1)
        params[parent.code] = thisCode
      })
      console.log(params)
      return params
    }
    const confirm = (vm) => {
      emit('do-search', getfilterParams())
      popState.show = false
    }
    onMounted(() => {
      // 初始化数据
      getFilters(props.beanId)
    })
    return {
      ...toRefs(state),
      reset,
      confirm,
      initScroll,
      wrapper,
      active,
      choose
    }
  }
}
</script>

<style scoped>
.filter-content {
  height: 90vh;
}
.filter-footer {
  bottom: 0px;
  position: fixed;
  width: 100%;
}

.van-button {
  width: 50%;
  display: inline;
}

.scroll-wrapper {
  height: 100%;
  overflow: hidden;
}

.filter-node-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

.filter-node {
  padding: 6px 12px;
  background: #f7f8fa;
  margin: 0px 10px 10px 0;
  box-sizing: border-box;
}

.filter-wrap {
  padding: 17px;
}

.van-button--default {
  border: #f7f8fa;
}
span.filter-node.active {
  background: #ecf1fe;
  color: #4073f5;
}

.filter-group {
  padding: 13px 0 10px;
}
</style>